<template>
  <div>
    <nav-bar title="交易记录"/>
    <div class="content_scroll">
      <ul class="tab_box">
        <li 
          v-for="(item, index) in serverTitle" 
          :key="index"
          :style="{color: currentIndex === index? '#ff5543': ''}"
          @click="itemClick(index)">{{item}}</li>
        <span class="line" :style="'transform: translateX(' + isActive + 'rem)'"></span>
      </ul>
      <ul class="item_box">
        <li class="item_list" v-for="(item, index) in list" :key="index">
          <div class="list_time">
            <div>
              <span class="sold">已出售（{{ item.time | getTimer }}）</span>
            </div>
            <div>
              <span class="modify">修改</span>
              <span class="delete">删除</span>
            </div>
          </div>
          <div class="list_content">
            <img :src="item.icon" alt="" />
            <div class="info_right">
              <div class="game_name">{{item.name}}</div>
              <div class="game_title">{{item.title}}</div>
              <div class="game_amount">
                <div class="game_total">小号累充{{item.total.toFixed(2)}}元</div>
                <div class="amount_list">
                  <span>¥</span>
                  <span>{{item.amount}}</span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../../components/common/navbar/NavBar.vue'
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      active: 2,
      serverTitle: ['全部', '已购买', '出售中', '已出售'],
      currentIndex: 0,
      list: [
        {
          time: "1619056800",
          icon: "https://p1.277sy.com/2021/04/21/607fd6f5b103b.jpg",
          name: "狩游世界-送GM真万充",
          title: "便宜卖 没时间玩",
          amount: 250,
          total: 618,
        },
        {
          time: "1619056800",
          icon: "https://p1.277sy.com/2021/04/21/607fd6f5b103b.jpg",
          name: "狩游世界-送GM真万充",
          title: "便宜卖 没时间玩",
          amount: 250,
          total: 618,
        },
        {
          time: "1619056800",
          icon: "https://p1.277sy.com/2021/04/21/607fd6f5b103b.jpg",
          name: "狩游世界-送GM真万充",
          title: "便宜卖 没时间玩",
          amount: 250,
          total: 618,
        },
        {
          time: "1619056800",
          icon: "https://p1.277sy.com/2021/04/21/607fd6f5b103b.jpg",
          name: "狩游世界-送GM真万充",
          title: "便宜卖 没时间玩",
          amount: 250,
          total: 618,
        },
        {
          time: "1619056800",
          icon: "https://p1.277sy.com/2021/04/21/607fd6f5b103b.jpg",
          name: "狩游世界-送GM真万充",
          title: "便宜卖 没时间玩",
          amount: 250,
          total: 618,
        },
      ],
    }
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index
    }
  },
  computed: {
    isActive() {
      return this.currentIndex * 2.5 + .916667
    },
  },
  filters: {
    getTimer(item) {
      var time = new Date(item * 1000)
      var Y = time.getFullYear()
      var M = time.getMonth() + 1
      var D = time.getDate()
      var h = time.getHours()
      h = h < 10 ? '0' + h : h
      var m = time.getMinutes()
      m = m < 10 ? '0' + m : m
      var s = time.getSeconds()
      s = s < 10 ? '0' + s : s
      return M + '-' + D + ' ' + h + ':' + m 
    }
  },
}
</script>

<style lang="less" scoped>
.tab_box {
  position: sticky;
  top: 0;
  width: 10rem;
  height: 1.093333rem;
  line-height: 1.093333rem;
  font-size: .32rem;
  font-weight: 500;
  color: #666666;
  background: #fff;
  display: flex;
  text-align: center;
  li {
    flex: 1;
  }
  .list_active {
    font-size: .4rem;
    font-weight: bold;
    color: #222;
  }
  .line {
    position: absolute;
    bottom: 0;
    width: .666667rem;
    height: .08rem;
    border-radius: .04rem;
    background: #FF5543;
    transition: all 0.3s ease;
  }
}

.item_box {
  width: 10rem;
  .item_list:first-child {
    margin-top: .133333rem;
  }
  .item_list {
    box-sizing: border-box;
    width: 10rem;
    height: auto;
    background: #fff;
    margin-bottom: .133333rem;
    padding: 0 .426667rem .4rem;
    font-size: 0.32rem;
    color: #999;
    .list_time {
      line-height: 1.173333rem;
      border-bottom: .013333rem solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .32rem;
      .sold {
        font-weight: 600;
        color: #ff0000;
      }
      .modify {
        display: inline-block;
        width: 1.2rem;
        height: .613333rem;
        border-radius: .306667rem;
        border: .013333rem solid #ff5543;
        color: #ff5543;
        font-size: .32rem;
        text-align: center;
        line-height: .613333rem;
      }
      .delete {
        display: inline-block;
        width: 1.2rem;
        height: .613333rem;
        border-radius: .306667rem;
        border: .013333rem solid #eee;
        color: #666;
        font-size: .32rem;
        text-align: center;
        line-height: .613333rem;
        margin-left: .266667rem;
      }
    }
    .list_content {
      margin-top: .266667rem;
      width: 100%;
      height: 1.706667rem;
      display: flex;
      align-items: center;
      img {
        height: 1.706667rem;
        width: 3.066667rem;
        border-radius: .133333rem;
        margin-right: .293333rem;
      }
      .info_right {
        flex: 1;
        .game_name {
          font-size: .373333rem;
          font-weight: bold;
          color: #222222;
        }
        .game_title {
          line-height: .666667rem;
        }
        .game_amount {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #2293fe;
          .game_total {
            font-size: .266667rem;
            line-height: .36rem;
            padding: 0 .133333rem;
            border-radius: .18rem;
            background: #fef7e7;
          }
          .amount_list {
            color: #ff0000;
            span:nth-child(1) {
              font-size: .293333rem;
              padding-right: .08rem;
            }
            span:nth-child(2) {
              font-size: .48rem;
            }
          }
        }
      }
    }
  }
}
</style>